<style lang="less">
    @import '../../assets/css/table.less';
    @import '../../assets/css/common.less';
</style>
<template>
    <div>
        <Row :gutter="10">
            <Col>
            <Card>
                <p slot="title">
                    <Icon type="pinpoint"></Icon>
                    用户登录记录
                </p>
                <Row class="margin-top-10">
                    <Table style="width: calc(100vw - 256px - 36px - 32px)" :loading="loading" :columns="columns" :data="list"></Table>
                </Row>
                <Row class="margin-top-10">
                    <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                          :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                </Row>
            </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    import { getUserLogin } from '@/api/main'
    import Time from '@/tool/Time'
    import User from '@/model/User'

    export default {
        name: 'login-record',
        data() {
            return {
                list: [],
                loading: true,
                pagenation: {},
            }
        },
        computed: {
            columns: function(){
                let columns = [
                    {
                        key: 'id',
                        title: 'id',
                        width: 80,
                    }
                ];
                columns.push({
                    key: 'ip',
                    title: '登录Ip',
                    render: (h, params) => {
                        return h('strong', params.row.ip)
                    },
                })
                columns.push.apply(columns, [
                    {
                        key: 'time',
                        title: '登录时间'
                    }
                ])
                return columns
            }
        },
        methods: {
            change: function(page) {
                this.loading = true
                this.init(page)
            },
            init(page = 0) {
                let obj = {}
                obj.user_id = this.$route.params.uid
                obj.page = page
                getUserLogin(obj).then(res => {
                    if (res.code === 0) {
                        this.list = res.data
                        this.loading = false
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    }
                })
            }
        },
        mounted() {
            this.init()
        },
    }
</script>
